<template>
  <div class="content">
    <h2>视频分类管理</h2>
    <div class="item-bar">
      <el-input
        placeholder="请输入要搜索的内容"
        v-model="input"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="primary" @click="add()" round>新增分类</el-button>
    </div>
    <el-empty :image-size="200" v-show="emptyShow"></el-empty>
    <el-table
      v-show="!emptyShow"
      :data="categories"
      style="width: 100%"
      v-loading="loading || !categories?.length"
      ref="table"
    >
      <el-table-column align="center" type="index" label="序号" :width="100">
      </el-table-column>
      <el-table-column width="400" label="类名" align="center">
        <template slot-scope="scope">
          <el-tag
            :disable-transitions="true"
            v-show="!(edit_status == scope.$index)"
          >
            {{ categories[scope.$index].name }}
          </el-tag>
          <el-input
            :ref="`input${scope.$index}`"
            placeholder="请输入类名"
            v-model="categories[scope.$index].name"
            v-show="edit_status == scope.$index"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="启用状态"
        :width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="categories[scope.$index].status"
            active-text="启用"
            inactive-text="停用"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(scope.$index)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column width="250" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="edit(scope.$index)">{{
            edit_status == scope.$index ? "确定" : "修改"
          }}</el-button>
          <el-button size="mini" @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      categories: [],
      emptyShow: false,
      input: "",
      edit_status: -1,
      loading: false,
    };
  },

  methods: {
    changeStatus(index) {
      this.loading = true;
      this.$axios
        .put("/categories", this.categories[index])
        .then(() => {
          this.$message.success("修改成功！");
          this.edit_status = -1;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
          this.$message.error("修改失败！");
        });
    },
    del(index) {
      this.loading = true;
      this.$axios
        .delete(`/categories/${index + 1}`)
        .then(() => {
          this.$message.success("删除成功！");
          this.loading = false;
          this.categories.splice(index, 1);
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
          this.$message.error("删除失败！");
        });
    },
    add() {
      if (
        this.categories[this.categories.length - 1].name &&
        this.edit_status != this.categories.length - 1
      ) {
        this.categories.push({
          categoryId: this.categories.length + 1,
          name: "",
          status: 1,
        });
        this.edit_status = this.categories.length - 1;
        setTimeout(() => {
          this.$refs[`input${this.categories.length - 1}`].focus();
        }, 10);
      }
    },
    edit(index) {
      if (this.edit_status == index) {
        this.loading = true;
        this.$axios
          .put("/categories", this.categories[index])
          .then(() => {
            this.$message.success("修改成功！");
            this.edit_status = -1;
            this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
            console.log(err);
            this.$message.error("修改失败！");
          });
      } else {
        this.edit_status = index;
        setTimeout(() => {
          this.$refs[`input${index}`].focus();
        }, 10);
      }
    },
  },
  mounted() {
    this.$axios.get("/categories").then((res) => {
      this.categories = res.data;
      console.log(this.categories);
    });
  },
};
</script>
<style lang="less" scoped>
.el-table {
  width: 70% !important;
  margin: 0 auto;
  .el-input {
    width: 50%;
  }
}
h2 {
  padding-top: 20px;
}

.item-bar {
  .el-input {
    width: 50%;
    padding-bottom: 20px;
    margin-right: 5%;
  }
  & > .el-button {
    width: 120px;
    font-size: medium;
  }
}
</style>
